<template>
  <div class="count">
    <p class="count-title">{{title}}</p>
    <ul class="count-number">
      <li v-for="(item,index) in count">
        <img :src="getNumberPic(item,index)"/>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'js-count',
    components: {},
    directives: {},
    props: {
      // 显示的标题
      title: {
        type: String,
        default: ''
      },
      // 显示的数字
      count: {
        type: String,
        default: ''
      }
    },
    mixins: [],
    data() {
      return {}
    },
    computed: {},
    watch: {},
    methods: {
      getNumberPic(item, index = 0) {
        let _ruset = require('../assets/bigscreen/count/tint_0.png')
        const _len = this.count.length - 7
        if (_len > 0 && index < _len) {
          _ruset = require('../assets/bigscreen/count/dartk_' + item + '.png')
        } else {
          _ruset = require('../assets/bigscreen/count/tint_' + item + '.png')
        }
        return _ruset
      }
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .count {
    margin: 0 auto;
    color: #fff;
    display: table;
    border-top: 1px solid #075a99;
    border-bottom: 1px solid #075a99;
    padding: 10px 17px;
    position: relative;
    &:before {
      content: '';
      background: url('../assets/bigscreen/line.png') center;
      position: absolute;
      top: 0;
      left: -1px;
      width: 3px;
      height: 100%;
      z-index: 100;
    }
    &:after {
      content: '';
      background: url('../assets/bigscreen/line.png') center;
      position: absolute;
      top: 0;
      right: -1px;
      width: 3px;
      height: 100%;
      z-index: 100;
    }
    &-title {
      line-height: 1;
      padding: 0;
      margin: 0;
      font-size: 24px;
      text-align: center;
    }
    &-number {
      list-style-type: none;
      display: list-item;
      padding: 0;
      > li {
        float: left;
        margin: auto 1px;
        > img {
        }
      }
    }

  }
</style>
